<template>
  <content-layout :model-name="$route.query.modelName">
    <div class="second-content">
      <div class="menu-bar">
        <!-- <div style="text-align: center;">
          <img src="@/assets/icon-new/icon-retract.png"/>
        </div> -->
        <template v-for="(item, index) of menuList">
          <dl
            @click="changeMenu(item)"
            :key="index"
            :style="{
              background:
                route === item.active ? item.selectColor : item.bg_color,
            }"
          >
            <dt
              style="font-size: 14px"
              :style="  route === item.active ? `color: ${item.textColor};background: #bbcbf0;` : ''"
            >
              {{ item.moduleName }}
            </dt>
            <dd style="margin-top: 5px">
              <img
                :src="route === item.active ? item.s_img : item.img"
                alt=""
                style="width: 35px"
              />
            </dd>
            <!-- <dd
              style="margin-top: 5px"
              :style="{ color: route === item.active ? item.pre : '' }"
            >
             {{item.progress}}
            </dd> -->
            <dd class="small-icon icon-border" style="margin-top: 5px">
              <div class="small-icon">
                <img
                  :src="route === item.active ? problemActivePng : problemPng"
                  alt=""
                  style="width: 13px"
                />
                <span style="margin-left: 5px">{{item.problemCount}}</span>
              </div>
              <div class="small-icon">
                <img
                  :src="route === item.active ? fousActivePng : fousPng"
                  alt=""
                  style="width: 13px"
                />
                <span style="margin-left: 5px">{{item.focusCount}}</span>
              </div>
            </dd>
          </dl>
        </template>
      </div>
      <div class="content-right">
        <component :is="choose" :id="id" @refresh-sub="subOverviewList"></component>
      </div>
    </div>
  </content-layout>
</template>

<script>
import { menu } from "./data";
import comprehensive from '../comprehensive'
import progress from '../progress'
import quality from '../quality'
import technology from '../technology'
import outInWarehouse from '../outInWarehouse'
import productAcceptance from '../productAcceptance'
import { overviewApis } from '@/apis'

import problemPng from '@/assets/icon-new/icon-question-solid.png'
import fousPng from '@/assets/icon-new/icon-focus-solid.png'
import problemActivePng from '@/assets/icon/icon-problem.png'
import fousActivePng from '@/assets/icon/icon-focus.png'

import churuku from '@/assets/icon-menu-new/churuku_normal.png';
import churukuHover from '@/assets/icon-menu-new/churuku_hover.png';
import yanshou from '@/assets/icon-menu-new/yanshou_normal.png';
import yanshouHover from '@/assets/icon-menu-new/yanshou_hover.png';

export default {
  props: ["id"],
  computed: {
    route() {
      return this.$route.query.active;
    },
    userInfo() {
      return this.$store.getters.userInfo;
    },
  },
  components: {},
  data() {
    this.problemPng = problemPng
    this.fousPng = fousPng
    this.problemActivePng = problemActivePng
    this.fousActivePng = fousActivePng

    return {
      menuList:[],
      choose:''
    };
  },
  watch: {
    $route(to) {
      const { active } = to.query;
      this.changeComponent(active);
    },
  },
  created() {
    const { active } = this.$route.query;
    this.changeComponent(active);
    this.subOverviewList();
  },
  methods: {
    //获取菜单
    async subOverviewList(){
      const {data}=await overviewApis.subOverviewList({modelId:this.id});
      this.menuList=data.map((item)=>{
        const findItem=menu.find(it=>it.moduleName===item.moduleName)

        return{
          ...item,
          ...findItem
        }
      })
      let newMenu = [{
        active: "churu",
        bg_color: "#F2F3F7",
        focusCount: 0,
        focusProblemNum: 0,
        img: churuku,
        moduleName: "出入库",
        pre: "#00CA77",
        problemCount: 0,
        problemNum: 0,
        progress: "10%",
        s_img: churukuHover,
        selectColor: "#D6DFF4",
        selector: false,
        textColor: "#285FE3"
      }, {
        active: "chanpin",
        bg_color: "#F2F3F7",
        focusCount: 0,
        focusProblemNum: 0,
        img: yanshou,
        moduleName: "产品验收",
        pre: "#00CA77",
        problemCount: 0,
        problemNum: 0,
        progress: "10%",
        s_img: yanshouHover,
        selectColor: "#D6DFF4",
        selector: false,
        textColor: "#285FE3"
      }]
      this.menuList = this.menuList.concat(newMenu)
    },
    
    /**
     *  根据不同类型 显示不同页面内容
     * @param type
     */
    changeComponent(type) {
      switch (type) {
        case "jindu":
          this.choose=progress
          break;
        case "zonghe":
          this.choose=comprehensive;
          break;
        case "shouhou":
          
          break;
        case "zhiliang":
          this.choose=quality
          break;
        case "jishu":
          this.choose=technology
          break;
        case "churu":
          this.choose=outInWarehouse
          break;
        case "chanpin":
           this.choose=productAcceptance
          break;
      }
    },
    changeMenu(item) {
      if (item.active == 'zonghe') {
        window.open(`${window.addressConfig.synthesisTest}#/?userName=${this.userInfo.userName}&modelId=${this.id}`, "_blank");
      } else {
        let { id } = this.$route.params;
        this.$router.push({
          name: "detail",
          params: { id: id },
          query: { active: item.active,modelName:this.$route.query.modelName },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.second-content {
  position: relative;
  height: 100%;
  background: #f2f3f7;

  .menu-bar {
    box-sizing: border-box;
    width: 130px;
    padding: 0 10px 10px 10px;
    // background: #fff;
    box-shadow: #ccc 3px 2px 3px;
    height: 100%;
    overflow: auto;
    float: left;
  }
  .content-right {
    height: 100%;
    margin-left: 150px;
    padding: 20px 30px 10px 10px;
    box-sizing: border-box;
    overflow: auto;
  }

  .menu-bar {
    dl {
      position: relative;
      text-align: center;
      background: #f2f3f7;
      padding: 28px 3px 6px 2px;
      border: 1px solid #c6cddc;
      margin-bottom: 10px;
      cursor: pointer;
    }
    :first-child {
      margin-top: 0;
    }

    dt{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 28px;
      line-height: 28px;
      background-color: #e5e7ec;
    }
  }
  .small-icon {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .icon-border {
    padding-top: 5px;
    border-top: 1px solid #b9ceff;
  }
}
.content-right{
  
}
</style>